<!DOCTYPE html>
<html>
  <head>
    <title>React开发单页面应用</title>
    <link rel="stylesheet" href="css/base.css">
  </head>
  <body>
    <div id="container">
      <div id="top">
        
      </div>
      <div id="wipper">
        <div id="sidebar">
          
        </div>
        <div id="content">
          
        </div>
      </div>
      <div id="footer">
        这里是footer
      </div>
    </div>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script type="text/babel">
      var Top = React.createClass({
        render: function() {
          return <div>Hello, {this.props.name}</div>
        }
      });
      var Sidebar = React.createClass({
        render: function() {
          return (
              <ul>
                {
                  React.Children.map(this.props.children, function (child) {
                    return <li>{child}</li>;
                  })
                }
              </ul>
          );
        }
      });
      var Content = React.createClass({
        render: function(){
          return (
            <div>{this.props.content}</div>
          );
        }
      })
      ReactDOM.render(
        <Top name="React, 构建单页面应用"/>,
        document.getElementById('top')
      );
      ReactDOM.render(
        <Sidebar>
          <span>首页</span>
          <span>个人中心</span>
          <span>活动中心</span>
        </Sidebar>,
        document.getElementById('sidebar')
      );
      ReactDOM.render(
        <Content content="<h3>这里是首页</h3>"/>,
        document.getElementById('content')
      );
    </script>
  </body>
</html>
